<template>
    <div class="login">
        <div class="login-body">

            <div class="login-body-info">
                <div class="login-body-left">
                    <label>用户名</label>
                    <label>密码</label>
                </div>
                <div class="login-body-right">
                    <input type="text" placeholder="登录账号"/>
                    <input type="password" placeholder="登陆密码"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "Login",
        components: {},
    }
</script>

<style scoped>
    .login {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5%;
        background-image: url("../assets/images/login/login-bg.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
    }


    .login-body span {
        display: flex;
        align-items: center;
        color: black;
        justify-content: center;
    }

    .login-body {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        padding: 2%;
    }

    .login-body-top{

    }

    .login-body-left {
        display: flex;
        flex-direction: column;
        padding: 5%;
    }

    .login-body-left label {
        margin-top: 2%;
    }

    .login-body-right {
        width: 20%;
        padding: 5%;
        display: flex;
        flex-direction: column;
    }

    .login-body-right input {
        padding: 1%;
        margin-top: 2%;
    }

    .login-body-info {
        background: white;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        margin: 20%;
        height: 50%;
        padding: 10%;
    }


</style>